@import '~ng-devui/styles-var/devui-var.scss';

.da-operations {
  display: flex;
  line-height: 60px;
  align-items: center;

  a {
    color: $devui-text;
  }

  a:hover {
    color: $devui-brand;
  }

  d-search {
    margin-right: 32px;

    /* TODO: 修正search组件视觉误差后删除 */
    margin-top: 0.1em;

    ::ng-deep .devui-search .devui-search-icon > svg {
      width: 14px;
      height: 14px;
      margin-top: -0.1em;
    }
  }

  d-badge {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .icon {
    font-size: $devui-font-size-lg;
  }

  .icon.icon-helping {
    padding-right: 24px;
    cursor: pointer;
  }

  .da-operations-user {
    outline: none;
    padding-right: 12px;
    cursor: pointer;

    .devui-dropdown-menu {
      width: 120px;

      .icon {
        font-size: $devui-font-size;
        margin-right: 8px;
      }
    }

    .da-logout {
      border-top: 1px solid lightgray;
    }

    .da-user-name {
      margin-left: 8px;
    }
  }

  .da-language-wrapper {
    display: flex;
    outline: none;
    height: 60px;
    align-items: center;
    cursor: pointer;
    padding: 0 12px;

    svg path {
      fill: $devui-text;
    }

    .da-change-language {
      width: 32px;
      height: 32px;
    }
  }

  .da-operations-notice {
    outline: none;
    display: flex;
    align-items: center;
    padding-right: 24px;
    padding-left: 8px;
    height: 60px;
    cursor: pointer;
  }
}

.da-operations-user {
  d-avatar ::ng-deep .devui-avatar-style {
    background-color: $devui-brand;
  }
}

@media only screen and (max-width: 620px) {
  .da-operations-user {
    .da-user-name {
      display: none;
    }
  }
}
